<template>
  <div>
    <div style="width: 500px;height: 300px;float: left">
      <chart
        :options="pie_one"
        autoresize
      />
    </div>
    <div style="width: 500px;height: 300px;float: left">
      <chart
        :options="pie_two"
        autoresize
      />
    </div>
    <div style="width: 500px;height: 300px;float: left">
      <chart
        :options="pie_three"
        autoresize
      />
    </div>
    <div class="clearfix"></div>
    <div style="width: 500px;height: 300px;float: left">
      <chart
        :options="pie_four"
        autoresize
      />
    </div>
    <div style="width: 500px;height: 300px;float: left">
      <chart
        :options="pie_five"
        autoresize
      />
    </div>
    <div style="width: 500px;height: 300px;float: left">
      <chart
        :options="pie_six"
        autoresize
      />
    </div>
    <div class="clearfix"></div>
    <div style="width: 500px;height: 300px;float: left">
      <chart
        :options="pie_seven"
        autoresize
      />
    </div>
    <div style="width: 500px;height: 300px;float: left">
      <chart
        :options="pie_eight"
        autoresize
      />
    </div>
    <div style="width: 500px;height: 300px;float: left">
      <chart
        :options="pie_night"
        autoresize
      />
    </div>
    <div class="clearfix"></div>
    <div style="width: 500px;height: 300px;float: left">
      <chart
        :options="pie_ten"
        autoresize
      />
    </div>
    <div style="width: 500px;height: 300px;float: left">
      <chart
        :options="pie_eleven"
        autoresize
      />
    </div>
    <div class="clearfix"></div>
  </div>
</template>

<style>
  /**
   * The default size is 600px×400px, for responsive charts
   * you may need to set percentage values as follows (also
   * don't forget to provide a size for the container).
   */
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'

export default {
  components: {
    'chart': ECharts
  },
  data () {
    return {
      grade_value: [],

      pie_one: {

        title: {
          text: '越秀区',
          /* subtext: '纯属虚构',*/
          x: 'center'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['老师', '学生']
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ['pie', 'funnel'],
              option: {
                funnel: {
                  x: '25%',
                  width: '50%',
                  funnelAlign: 'left',
                  max: 1548
                }
              }
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 20, name: '老师' },
              { value: 300, name: '学生' }
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} :\n  {c}人 \n ({d}%)'
                }
              }
            }
          }
        ]
      },
      pie_two: {

        title: {
          text: '荔湾区',
          /* subtext: '纯属虚构',*/
          x: 'center'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['老师', '学生']
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ['pie', 'funnel'],
              option: {
                funnel: {
                  x: '25%',
                  width: '50%',
                  funnelAlign: 'left',
                  max: 1548
                }
              }
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 30, name: '老师' },
              { value: 510, name: '学生' }
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} :\n  {c}人 \n ({d}%)'
                }
              }
            }
          }
        ]
      },
      pie_three: {

        title: {
          text: '海珠区',
          /* subtext: '纯属虚构',*/
          x: 'center'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['老师', '学生']
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ['pie', 'funnel'],
              option: {
                funnel: {
                  x: '25%',
                  width: '50%',
                  funnelAlign: 'left',
                  max: 1548
                }
              }
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 30, name: '老师' },
              { value: 540, name: '学生' }
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} :\n  {c}人 \n ({d}%)'
                }
              }
            }
          }
        ]
      },
      pie_four: {

        title: {
          text: '天河区',
          /* subtext: '纯属虚构',*/
          x: 'center'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['老师', '学生']
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ['pie', 'funnel'],
              option: {
                funnel: {
                  x: '25%',
                  width: '50%',
                  funnelAlign: 'left',
                  max: 1548
                }
              }
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 50, name: '老师' },
              { value: 700, name: '学生' }
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} :\n  {c}人 \n ({d}%)'
                }
              }
            }
          }
        ]
      },
      pie_five: {

        title: {
          text: '黄埔区',
          /* subtext: '纯属虚构',*/
          x: 'center'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['老师', '学生']
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ['pie', 'funnel'],
              option: {
                funnel: {
                  x: '25%',
                  width: '50%',
                  funnelAlign: 'left',
                  max: 1548
                }
              }
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 50, name: '老师' },
              { value: 750, name: '学生' }
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} :\n  {c}人 \n ({d}%)'
                }
              }
            }
          }
        ]
      },
      pie_six: {

        title: {
          text: '白云区',
          /* subtext: '纯属虚构',*/
          x: 'center'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['老师', '学生']
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ['pie', 'funnel'],
              option: {
                funnel: {
                  x: '25%',
                  width: '50%',
                  funnelAlign: 'left',
                  max: 1548
                }
              }
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 25, name: '老师' },
              { value: 200, name: '学生' }
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} :\n  {c}人 \n ({d}%)'
                }
              }
            }
          }
        ]
      },
      pie_seven: {

        title: {
          text: '增城区',
          /* subtext: '纯属虚构',*/
          x: 'center'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['老师', '学生']
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ['pie', 'funnel'],
              option: {
                funnel: {
                  x: '25%',
                  width: '50%',
                  funnelAlign: 'left',
                  max: 1548
                }
              }
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 30, name: '老师' },
              { value: 420, name: '学生' }
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} :\n  {c}人 \n ({d}%)'
                }
              }
            }
          }
        ]
      },
      pie_eight: {

        title: {
          text: '花都区',
          /* subtext: '纯属虚构',*/
          x: 'center'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['老师', '学生']
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ['pie', 'funnel'],
              option: {
                funnel: {
                  x: '25%',
                  width: '50%',
                  funnelAlign: 'left',
                  max: 1548
                }
              }
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 40, name: '老师' },
              { value: 680, name: '学生' }
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} :\n  {c}人 \n ({d}%)'
                }
              }
            }
          }
        ]
      },
      pie_night: {

        title: {
          text: '从化区',
          /* subtext: '纯属虚构',*/
          x: 'center'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['老师', '学生']
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ['pie', 'funnel'],
              option: {
                funnel: {
                  x: '25%',
                  width: '50%',
                  funnelAlign: 'left',
                  max: 1548
                }
              }
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 23, name: '老师' },
              { value: 414, name: '学生' }
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} :\n  {c}人 \n ({d}%)'
                }
              }
            }
          }
        ]
      },
      pie_ten: {

        title: {
          text: '番禺区',
          /* subtext: '纯属虚构',*/
          x: 'center'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['老师', '学生']
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ['pie', 'funnel'],
              option: {
                funnel: {
                  x: '25%',
                  width: '50%',
                  funnelAlign: 'left',
                  max: 1548
                }
              }
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 36, name: '老师' },
              { value: 648, name: '学生' }
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} :\n  {c}人 \n ({d}%)'
                }
              }
            }
          }
        ]
      },
      pie_eleven: {

        title: {
          text: '南沙区',
          /* subtext: '纯属虚构',*/
          x: 'center'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['老师', '学生']
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ['pie', 'funnel'],
              option: {
                funnel: {
                  x: '25%',
                  width: '50%',
                  funnelAlign: 'left',
                  max: 1548
                }
              }
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 27, name: '老师' },
              { value: 378, name: '学生' }
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} :\n  {c}人 \n ({d}%)'
                }
              }
            }
          }
        ]
      }
    }
  },
  methods: {

  }
}
</script>
